<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>洗衣服务下单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            min-height: 1024px;
        }
        .form-input {
            @apply w-full px-4 py-3 border border-gray-200 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
        }
        .form-select {
            @apply w-full px-4 py-3 border border-gray-200 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent appearance-none bg-white bg-[url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")] bg-no-repeat bg-[length:20px] bg-[center_right_1rem];
        }
        .checkbox-label {
            @apply flex items-center space-x-2 cursor-pointer;
        }
        .checkbox-input {
            @apply w-5 h-5 text-primary rounded border-gray-300 focus:ring-primary;
        }
        .radio-label {
            @apply flex items-center space-x-2 cursor-pointer;
        }
        .radio-input {
            @apply w-5 h-5 text-primary rounded-full border-gray-300 focus:ring-primary;
        }
        .upload-area {
            @apply w-full h-40 border-2 border-dashed border-gray-300 rounded-md flex flex-col items-center justify-center cursor-pointer hover:border-primary transition-colors duration-200;
        }
        .service-card {
            position: relative;
            cursor: pointer;
            padding: 1.5rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            transition: all 0.2s;
        }
        .service-card:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .service-card.active {
            border: 2px solid #3b82f6;
            background-color: #eff6ff;
        }
        .step-indicator {
            @apply w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-medium;
        }
        .step-indicator.active {
            @apply bg-primary text-white;
        }
        .step-indicator.completed {
            @apply bg-green-100 text-green-600;
        }
        .address-card {
            @apply p-4 border border-gray-200 rounded-lg hover:border-primary cursor-pointer;
        }
        .address-card.active {
            @apply border-2 border-primary bg-blue-50;
        }
        .success-icon {
            @apply w-20 h-20 rounded-full bg-green-100 flex items-center justify-center text-green-500 text-4xl;
        }
        .order-card {
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .order-status {
            font-weight: bold;
        }
        .order-status.pending {
            color: #ffc107;
        }
        .order-status.completed {
            color: #28a745;
        }
        .order-status.cancelled {
            color: #dc3545;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="max-w-4xl mx-auto px-6 py-8">
        <!-- 顶部导航 -->
        <div class="flex justify-between items-center mb-8">
            <div class="font-['Pacifico'] text-2xl text-primary">logo</div>
            <div class="flex items-center space-x-4">
                <a href="index.html" class="text-gray-600 hover:text-primary">首页</a>
                <a href="price.html" class="text-gray-600 hover:text-primary">我的订单</a>
                <a href="about.html" class="text-gray-600 hover:text-primary">个人中心</a>
            </div>
        </div>

        <!-- 步骤指示器 -->
        <div class="flex justify-between items-center mb-12 relative">
            <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -z-10"></div>
            <div class="flex flex-col items-center">
                <div class="step-indicator active">1</div>
                <p class="mt-2 text-sm font-medium text-primary">选择服务</p>
            </div>
            <div class="flex flex-col items-center">
                <div class="step-indicator">2</div>
                <p class="mt-2 text-sm font-medium text-gray-500">填写信息</p>
            </div>
            <div class="flex flex-col items-center">
                <div class="step-indicator">3</div>
                <p class="mt-2 text-sm font-medium text-gray-500">确认订单</p>
            </div>
            <div class="flex flex-col items-center">
                <div class="step-indicator">4</div>
                <p class="mt-2 text-sm font-medium text-gray-500">支付完成</p>
            </div>
        </div>

        <!-- 主表单区域 -->
        <div class="bg-white rounded-xl shadow-sm p-8 mb-8">
            <h1 class="text-2xl font-bold text-gray-800 mb-6">洗衣服务下单</h1>

            <!-- 洗衣类型选择 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">选择洗衣类型</h2>
                <div class="grid grid-cols-3 gap-4">
                    <div class="service-card" data-service="dry-clean">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
                                <i class="fas fa-tshirt text-xl"></i>
                            </div>
                            <h3 class="font-medium text-gray-800">干洗服务</h3>
                        </div>
                        <p class="text-gray-500 text-sm mb-3">适合西装、大衣等高档衣物，专业干洗不伤面料</p>
                        <p class="text-primary font-medium">¥39 起</p>
                    </div>
                    <div class="service-card" data-service="water-wash">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
                                <i class="fas fa-water text-xl"></i>
                            </div>
                            <h3 class="font-medium text-gray-800">水洗服务</h3>
                        </div>
                        <p class="text-gray-500 text-sm mb-3">适合日常衣物，环保洗涤剂，温和不伤手</p>
                        <p class="text-primary font-medium">¥29 起</p>
                    </div>
                    <div class="service-card" data-service="special-care">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
                                <i class="fas fa-star text-xl"></i>
                            </div>
                            <h3 class="font-medium text-gray-800">特殊洗护</h3>
                        </div>
                        <p class="text-gray-500 text-sm mb-3">皮具、奢侈品等特殊材质，专业护理</p>
                        <p class="text-primary font-medium">¥99 起</p>
                    </div>
                </div>
            </div>
            <!-- 衣物材质选择 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">选择衣物材质</h2>
                <div class="grid grid-cols-4 gap-3">
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input" checked>
                        <span>棉质</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input">
                        <span>羊毛</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input">
                        <span>丝绸</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input">
                        <span>混纺</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input">
                        <span>化纤</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input">
                        <span>牛仔</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input">
                        <span>亚麻</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="material" class="radio-input">
                        <span>其他</span>
                    </label>
                </div>
            </div>

            <!-- 特殊要求 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">特殊要求（可选）</h2>
                <div class="grid grid-cols-3 gap-4">
                    <label class="checkbox-label">
                        <input type="checkbox" class="checkbox-input">
                        <span>加急服务（+¥15）</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="checkbox-input">
                        <span>深度除菌（+¥10）</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="checkbox-input">
                        <span>精细熨烫（+¥8）</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="checkbox-input">
                        <span>防皱处理（+¥5）</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="checkbox-input">
                        <span>芳香护理（+¥5）</span>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="checkbox-input">
                        <span>特殊包装（+¥5）</span>
                    </label>
                </div>
            </div>

            <!-- 衣物描述 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">衣物描述</h2>
                <textarea class="form-input" rows="3" placeholder="请描述衣物的颜色、品牌、特殊污渍或损坏情况等信息"></textarea>
            </div>

            <!-- 衣物数量 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">衣物数量</h2>
                <div class="flex items-center">
                    <button class="w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center text-gray-500 hover:bg-gray-100">-</button>
                    <input type="text" class="w-16 mx-3 text-center form-input" value="1">
                    <button class="w-10 h-10 rounded-full border border-gray-300 flex items-center justify-center text-gray-500 hover:bg-gray-100">+</button>
                    <span class="ml-4 text-gray-500">件</span>
                </div>
            </div>

            <!-- 图片上传 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">上传衣物照片（可选）</h2>
                <div class="upload-area">
                    <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                    <p class="text-gray-500">点击上传或拖拽照片到此处</p>
                    <p class="text-sm text-gray-400 mt-1">支持 JPG/PNG 格式，最多 3 张</p>
                </div>
                <div class="flex mt-3 space-x-3">
                    <div class="w-20 h-20 rounded-md bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-times text-gray-400"></i>
                    </div>
                </div>
            </div>
            <!-- 取衣时间 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">取衣时间</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">日期</label>
                        <input type="date" class="form-input">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">时间段</label>
                        <select class="form-select">
                            <option>08:00 - 10:00</option>
                            <option>10:00 - 12:00</option>
                            <option>12:00 - 14:00</option>
                            <option>14:00 - 16:00</option>
                            <option>16:00 - 18:00</option>
                            <option>18:00 - 20:00</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 取衣地点选择 -->
            <div class="mb-10">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-gray-700">取衣地点</h2>
                    <button id="addAddressBtn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">
                        <i class="fas fa-plus mr-2"></i>新增地址
                    </button>
                </div>
                <div class="grid grid-cols-1 gap-4">
                    <!-- 地址卡片 -->
                    <div id="currentAddressCard" class="address-card active">
                        <div class="flex items-start mb-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
                                <i class="fas fa-home text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-gray-800">家庭地址</h3>
                                <p class="text-gray-500 text-sm">北京市朝阳区建国路88号</p>
                            </div>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-user mr-2"></i>
                            <span>张三</span>
                            <i class="fas fa-phone ml-4 mr-2"></i>
                            <span>138****8888</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 新增地址弹窗 -->
            <div id="addAddressModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
                <div class="bg-white rounded-xl p-6 w-full max-w-md">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold text-gray-800">新增地址</h3>
                        <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <form id="addAddressForm" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">联系人</label>
                            <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-primary" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                            <input type="tel" name="phone" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-primary" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">详细地址</label>
                            <textarea name="address" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-primary" rows="3" required></textarea>
                        </div>
                        <div class="flex justify-end space-x-3">
                            <button type="button" id="cancelBtn" class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
                            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">保存</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 备注信息 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">备注信息（可选）</h2>
                <textarea class="form-input" rows="2" placeholder="如有其他特殊要求，请在此处填写"></textarea>
            </div>
            <!-- 费用明细 -->
            <div class="mb-10">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">费用明细</h2>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-gray-600">干洗服务</span>
                        <span class="font-medium">¥39.00</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-gray-600">衣物数量 ×1</span>
                        <span class="font-medium">¥39.00</span>
                    </div>
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-gray-600">加急服务</span>
                        <span class="font-medium">¥15.00</span>
                    </div>
                    <div class="flex justify-between py-2">
                        <span class="text-gray-600">优惠券</span>
                        <span class="text-primary font-medium">-¥10.00</span>
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <div>
                            <span class="text-gray-600">选择优惠券：</span>
                            <select class="form-select inline-block w-40">
                                <option>不使用优惠券</option>
                                <option>新用户专享 ¥10</option>
                                <option>满 100 减 15</option>
                                <option>满 200 减 30</option>
                            </select>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-500">总计：</p>
                            <p class="text-2xl font-bold text-primary">¥44.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部固定栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg py-4 px-6">
            <div class="max-w-4xl mx-auto flex justify-between items-center">
                <div>
                    <p class="text-sm text-gray-500">总计金额</p>
                    <p class="text-2xl font-bold text-primary">¥44.00</p>
                </div>
                <button class="bg-primary hover:bg-blue-600 text-white font-medium py-3 px-8 rounded-button whitespace-nowrap transition-colors duration-200">
                    提交订单
                </button>
            </div>
        </div>

        <!-- 成功提示弹窗（默认隐藏） -->
        <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl p-8 max-w-md w-full text-center">
                <div class="success-icon mx-auto mb-6">
                    <i class="fas fa-check"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-800 mb-2">订单提交成功！</h2>
                <p class="text-gray-600 mb-6">您的订单编号：<span class="font-medium">WX20230615888</span></p>
                <p class="text-gray-500 text-sm mb-6">我们的工作人员将在您选择的时间上门取件，请保持电话畅通</p>
                <div class="grid grid-cols-2 gap-4">
                    <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-button whitespace-nowrap transition-colors duration-200">
                        查看订单
                    </a>
                    <a href="index.html" class="bg-primary hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-button whitespace-nowrap transition-colors duration-200">
                        返回首页
                    </a>
                </div>
            </div>
        </div>

        <!-- 失败提示弹窗（默认隐藏） -->
        <div id="errorModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-xl p-8 max-w-md w-full text-center">
                <div class="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center text-red-500 text-4xl mx-auto mb-6">
                    <i class="fas fa-times"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-800 mb-2">订单提交失败</h2>
                <p class="text-gray-600 mb-6" id="errorMessage">请稍后重试</p>
                <button id="closeErrorModal" class="bg-primary hover:bg-blue-600 text-white font-medium py-2 px-8 rounded-button whitespace-nowrap transition-colors duration-200">
                    确定
                </button>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 新增地址相关功能
        const addAddressBtn = document.getElementById('addAddressBtn');
        const addAddressModal = document.getElementById('addAddressModal');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const cancelBtn = document.getElementById('cancelBtn');
        const addAddressForm = document.getElementById('addAddressForm');
        const currentAddressCard = document.getElementById('currentAddressCard');

        // 打开弹窗
        addAddressBtn.addEventListener('click', () => {
            addAddressModal.classList.remove('hidden');
        });

        // 关闭弹窗
        function closeModal() {
            addAddressModal.classList.add('hidden');
            addAddressForm.reset();
        }

        closeModalBtn.addEventListener('click', closeModal);
        cancelBtn.addEventListener('click', closeModal);

        // 点击弹窗外部关闭
        addAddressModal.addEventListener('click', (e) => {
            if (e.target === addAddressModal) {
                closeModal();
            }
        });

        // 提交表单
        addAddressForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const formData = new FormData(addAddressForm);
            const newAddress = {
                name: formData.get('name'),
                phone: formData.get('phone'),
                address: formData.get('address')
            };

            // 更新当前地址卡片
            currentAddressCard.innerHTML = `
                <div class="flex items-start mb-3">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
                        <i class="fas fa-home text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-medium text-gray-800">${newAddress.name}的地址</h3>
                        <p class="text-gray-500 text-sm">${newAddress.address}</p>
                    </div>
                </div>
                <div class="flex items-center text-sm text-gray-500">
                    <i class="fas fa-user mr-2"></i>
                    <span>${newAddress.name}</span>
                    <i class="fas fa-phone ml-4 mr-2"></i>
                    <span>${newAddress.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}</span>
                </div>
            `;

            // 关闭弹窗并重置表单
            closeModal();

            // 更新取衣地点信息
            const pickupAddress = document.getElementById('pickupAddress');
            if (pickupAddress) {
                pickupAddress.textContent = newAddress.address;
            }
        });

        // 费用计算相关变量
        let basePrice = 39; // 基础价格
        let itemCount = 1;  // 衣物数量
        let selectedService = 'dry-clean'; // 默认服务类型
        let extraServices = {
            urgent: false,    // 加急服务
            deepClean: false, // 深度除菌
            ironing: false,   // 精细熨烫
            antiWrinkle: false, // 防皱处理
            fragrance: false, // 芳香护理
            specialPack: false // 特殊包装
        };

        // 更新费用明细
        function updatePriceDetails() {
            const servicePrice = document.querySelector('.bg-gray-50 .flex.justify-between:first-child span:last-child');
            const itemCountPrice = document.querySelector('.bg-gray-50 .flex.justify-between:nth-child(2) span:last-child');
            const totalPrice = document.querySelector('.text-2xl.font-bold.text-primary');
            const bottomTotalPrice = document.querySelector('.fixed.bottom-0 .text-2xl.font-bold.text-primary');

            // 计算基础服务费用
            let subtotal = basePrice * itemCount;
            
            // 计算额外服务费用
            let extraCost = 0;
            if (extraServices.urgent) extraCost += 15;
            if (extraServices.deepClean) extraCost += 10;
            if (extraServices.ironing) extraCost += 8;
            if (extraServices.antiWrinkle) extraCost += 5;
            if (extraServices.fragrance) extraCost += 5;
            if (extraServices.specialPack) extraCost += 5;

            // 更新服务费用显示
            servicePrice.textContent = `¥${basePrice.toFixed(2)}`;
            itemCountPrice.textContent = `¥${subtotal.toFixed(2)}`;

            // 更新总价
            const finalTotal = subtotal + extraCost;
            totalPrice.textContent = `¥${finalTotal.toFixed(2)}`;
            bottomTotalPrice.textContent = `¥${finalTotal.toFixed(2)}`;
        }

        // 服务卡片选择
        document.querySelectorAll('.service-card').forEach(card => {
            card.addEventListener('click', function() {
                document.querySelectorAll('.service-card').forEach(c => c.classList.remove('active'));
                this.classList.add('active');

                // 更新基础价格
                const serviceType = this.getAttribute('data-service');
                selectedService = serviceType;
                
                switch(serviceType) {
                    case 'dry-clean':
                        basePrice = 39;
                        break;
                    case 'water-wash':
                        basePrice = 29;
                        break;
                    case 'special-care':
                        basePrice = 99;
                        break;
                }

                updatePriceDetails();
            });
        });

        // 特殊要求选择
        document.querySelectorAll('.checkbox-input').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const serviceName = this.parentElement.textContent.trim();
                switch(serviceName) {
                    case '加急服务（+¥15）':
                        extraServices.urgent = this.checked;
                        break;
                    case '深度除菌（+¥10）':
                        extraServices.deepClean = this.checked;
                        break;
                    case '精细熨烫（+¥8）':
                        extraServices.ironing = this.checked;
                        break;
                    case '防皱处理（+¥5）':
                        extraServices.antiWrinkle = this.checked;
                        break;
                    case '芳香护理（+¥5）':
                        extraServices.fragrance = this.checked;
                        break;
                    case '特殊包装（+¥5）':
                        extraServices.specialPack = this.checked;
                        break;
                }
                updatePriceDetails();
            });
        });

        // 衣物数量增减
        const minusBtn = document.querySelector('button:first-of-type');
        const plusBtn = document.querySelector('button:last-of-type');
        const quantityInput = document.querySelector('input[type="text"]');

        minusBtn.addEventListener('click', () => {
            if (itemCount > 1) {
                itemCount--;
                quantityInput.value = itemCount;
                updatePriceDetails();
            }
        });

        plusBtn.addEventListener('click', () => {
            itemCount++;
            quantityInput.value = itemCount;
            updatePriceDetails();
        });

        // 优惠券选择
        const couponSelect = document.querySelector('.form-select.inline-block');
        couponSelect.addEventListener('change', function() {
            const selectedCoupon = this.value;
            let discount = 0;
            
            switch(selectedCoupon) {
                case '新用户专享 ¥10':
                    discount = 10;
                    break;
                case '满 100 减 15':
                    discount = 15;
                    break;
                case '满 200 减 30':
                    discount = 30;
                    break;
            }

            const discountElement = document.querySelector('.text-primary.font-medium');
            discountElement.textContent = `-¥${discount.toFixed(2)}`;
            
            updatePriceDetails();
        });

        // 初始化费用明细
        updatePriceDetails();

        // 提交订单
        document.querySelector('.rounded-button').addEventListener('click', async function() {
            try {
                // 表单验证
                const selectedServiceCard = document.querySelector('.service-card.active');
                if (!selectedServiceCard) {
                    showError('请选择洗衣类型');
                    return;
                }

                const selectedMaterial = document.querySelector('input[name="material"]:checked');
                if (!selectedMaterial) {
                    showError('请选择衣物材质');
                    return;
                }

                const addressCard = document.querySelector('.address-card.active');
                if (!addressCard) {
                    showError('请选择取衣地址');
                    return;
                }

                const pickupDateInput = document.querySelector('input[type="date"]');
                if (!pickupDateInput || !pickupDateInput.value) {
                    showError('请选择取衣日期');
                    return;
                }

                const pickupTimeSelect = document.querySelector('.form-select');
                if (!pickupTimeSelect || !pickupTimeSelect.value) {
                    showError('请选择取衣时间段');
                    return;
                }

                // 显示加载状态
                this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 提交中...';
                this.disabled = true;

                // 获取表单数据
                const specialRequirements = [];
                document.querySelectorAll('.checkbox-input:checked').forEach(checkbox => {
                    specialRequirements.push(checkbox.parentElement.textContent.trim());
                });

                // 获取衣物描述
                const itemDescriptionInput = document.querySelector('textarea[placeholder*="衣物描述"]');
                const itemDescription = itemDescriptionInput ? itemDescriptionInput.value : '';

                // 获取衣物数量
                const quantityInput = document.querySelector('input[type="text"]');
                const itemCount = quantityInput ? parseInt(quantityInput.value) || 1 : 1;

                // 获取地址信息
                const addressInfo = addressCard.querySelector('.text-gray-500.text-sm');
                const contactNameSpan = addressCard.querySelector('.text-gray-500 span:first-of-type');
                const contactPhoneSpan = addressCard.querySelector('.text-gray-500 span:last-of-type');

                if (!addressInfo || !contactNameSpan || !contactPhoneSpan) {
                    showError('地址信息不完整');
                    return;
                }

                // 获取总金额
                const totalAmountElement = document.querySelector('.text-2xl.font-bold.text-primary');
                if (!totalAmountElement) {
                    showError('无法获取订单金额');
                    return;
                }

                const orderData = {
                    serviceType: selectedServiceCard.getAttribute('data-service'),
                    materialType: selectedMaterial.parentElement.textContent.trim(),
                    itemCount: itemCount,
                    specialRequirements: specialRequirements.join(','),
                    itemDescription: itemDescription,
                    pickupAddress: addressInfo.textContent,
                    pickupTime: pickupTimeSelect.value,
                    pickupDate: pickupDateInput.value,
                    contactName: contactNameSpan.textContent,
                    contactPhone: contactPhoneSpan.textContent,
                    totalAmount: parseFloat(totalAmountElement.textContent.replace('¥', '')) || 0
                };

                // 发送请求到后端
                const response = await fetch('/api/orders', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(orderData)
                });

                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.message || '服务器响应错误');
                }

                const result = await response.json();

                // 显示成功弹窗
                const successModal = document.getElementById('successModal');
                if (successModal) {
                    const orderNoElement = successModal.querySelector('.font-medium');
                    if (orderNoElement) {
                        orderNoElement.textContent = result.orderNo;
                    }
                    successModal.classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                } else {
                    throw new Error('无法显示成功提示');
                }

            } catch (error) {
                console.error('提交订单错误:', error);
                showError(error.message || '提交订单失败，请稍后重试');
            } finally {
                // 恢复按钮状态
                this.innerHTML = '提交订单';
                this.disabled = false;
            }
        });

        // 显示错误提示
        function showError(message) {
            const errorModal = document.getElementById('errorModal');
            const errorMessage = document.getElementById('errorMessage');
            errorMessage.textContent = message;
            errorModal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        // 关闭错误提示
        document.getElementById('closeErrorModal').addEventListener('click', function() {
            document.getElementById('errorModal').classList.add('hidden');
            document.body.style.overflow = 'auto';
        });

        // 点击错误弹窗外部关闭
        document.getElementById('errorModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
                document.body.style.overflow = 'auto';
            }
        });
    </script>
</body>
</html>